<template>
  <ContainerGroup
    class="dept-container"
    style="flex-direction: row; box-sizing: border-box"
  >
    <!-- 科室类型展示区域开始 -->
    <Container ref="container" class="dept-type" :height="height">
      <div class="title">费用要素</div>
      <el-table
        ref="table"
        :data="deptType"
        :header-cell-style="{ background: '#f3f6fb', borderColor: '#e7ecf8' }"
        highlight-current-row
        @row-click="rowClick"
      >
        <el-table-column align="center" prop="edCode" label="编码" />
        <el-table-column prop="edName" label="名称" />
      </el-table>
    </Container>
    <!-- 科室类型展示区域结束 -->

    <!-- 表格主体区域开始 -->
    <Container class="factor-detail" :height="height">
      <!-- 表格区域标题 -->
      <div class="title">费用明细</div>
      <!-- 按钮区域 -->
      <div class="button-bar">
        <Button icon="add" @click="addDetail">新增</Button>
      </div>

      <!-- 表格区域 -->
      <div class="table-box">
        <el-table
          :data="factorData"
          border
          :header-cell-style="{ background: '#fafafa', borderColor: '#e7ecf8' }"
        >
          <el-table-column
            align="center"
            type="index"
            label="序号"
            width="60"
          />
          <el-table-column
            align="center"
            prop="edCode"
            label="编码"
            width="90"
          />
          <el-table-column prop="edName" label="名称" />
          <el-table-column prop="updatedOn" label="操作时间" />
          <el-table-column align="center" label="是否启用" width="120">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.rowStatus"
                active-color="#FFA712"
                :active-value="0"
                :inactive-value="1"
                @change="switchUse(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="120">
            <template slot-scope="scope">
              <!-- <span class="edit-detail" @click="editDetail(scope.row)">修改</span> -->
              <el-tooltip
                class="item"
                effect="dark"
                content="编辑"
                placement="top"
              >
                <i
                  class="el-icon-edit-outline"
                  style="
                    padding-top: 4px;
                    font-size: 20px;
                    color: #207efa;
                    cursor: pointer;
                  "
                  @click="editDetail(scope.row)"
                />
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <!-- <Pagination
        :total="pageAttr.total"
        :page="pageAttr.currentPage"
        :page-size="pageAttr.pageSize"
        @pagation="pagationChange"
      /> -->
      <Drawer
        :visible="showEidtVlidate"
        :title="drawerTitle"
        width="30%"
        :footer-btns="[
          {
            text: '取消',
            type: 'info',
            trigger: 'cancel',
          },
          {
            text: '确定',
            type: 'primary',
            trigger: 'okBtn',
          },
        ]"
        @cancel="drawClose"
        @okBtn="saveEidtRule"
      >
        <el-form
          ref="form"
          :model="form"
          label-width="120px"
          style="margin-top: 48px"
        >
          <!-- <el-form-item label="编码：">
            <el-input
              v-model="form.edCode"
              :disabled="deptDisabled"
              clearable
              style="width: auto"
            />
          </el-form-item> -->
          <el-form-item label="名称：">
            <el-input v-model="form.edName" clearable style="width: auto" />
          </el-form-item>
          <el-form-item label="费用要素：">
            <el-select v-model="form.costType" clearable>
              <template v-for="(item, index) in deptType">
                <el-option
                  v-if="item.edName"
                  :key="index"
                  :value="item.edCode + '/' + item.edName"
                  :label="item.edName"
                />
              </template>
            </el-select>
          </el-form-item>
        </el-form>
      </Drawer>
    </Container>
    <!-- 弹层区域开始 -->

    <!-- 表格主体区域结束 -->
  </ContainerGroup>
</template>

<script>
import {
  getEnumDetailSource,
  addEnumDetail,
  modifyEnumDetail
} from '../../../utils/apis/accountingUnit/factor'
import { BasicParams } from '../../../utils/basicParams'
export default {
  name: 'Factor', // 费用要素
  components: {},
  data() {
    return {
      // pageAttr: {
      //   pageSize: 20,
      //   currentPage: 1,
      //   total: 0
      // },
      form: {
        edCode: '',
        edName: '',
        id: '',
        costType: ''
      },
      height: 'fill',
      deptDisabled: false,
      factorData: [],
      deptType: [],
      showEidtVlidate: false,
      drawerTitle: ''
      // 新增或编辑表单
    }
  },
  created() {
    this.init()
  },
  mounted() {},
  methods: {
    // 编辑
    editDetail(row) {
      this.isEdit = true
      this.drawerTitle = '修改核算单元'
      this.showDetail(row)
    },
    // 新增按钮事件
    addDetail() {
      this.isEdit = false
      this.drawerTitle = '新增费用'
      this.showDetail()
    },
    showDetail(row) {
      const basicParams = new BasicParams()
      if (this.isEdit) {
        this.deptDisabled = true
        basicParams.edCode = row.edCode
        basicParams.edExtraFirstCode = ''
        getEnumDetailSource(basicParams).then((res) => {
          if (res.data.code === 200) {
            this.form.edCode = res.data.data[0].edCode
            this.form.edName = res.data.data[0].edName
            this.form.costType =
              res.data.data[0].edExtraFirstCode +
              '/' +
              res.data.data[0].edExtraFirstDescription
            this.form.id = res.data.data[0].edId
          } else {
            this.$message.error(res.data.message)
          }
        })
      } else {
        this.deptDisabled = false
        this.form.edCode = ''
        this.form.edName = ''
        this.form.costType = ''
      }
      this.showEidtVlidate = true
    },
    // 关闭弹窗
    drawClose() {
      this.showEidtVlidate = false
    },
    // 新增/ 编辑
    saveEidtRule() {
      const basicParams = new BasicParams()
      basicParams.edExtraFirstCode = ''
      basicParams.edCode = this.form.edCode
      basicParams.edName = this.form.edName
      basicParams.edExtraFirstCode = this.form.costType.split('/')[0]
      basicParams.edExtraFirstDescription = this.form.costType.split('/')[1]
      if (this.isEdit) {
        basicParams.edId = this.form.id
        modifyEnumDetail(basicParams).then((res) => {
          if (res.data.code === 200) {
            this.$message.success(res.data.message)
            this.init()
            this.showEidtVlidate = false
          } else {
            this.$message.error(res.data.message)
          }
        })
      } else {
        basicParams.edId = ''
        addEnumDetail(basicParams).then((res) => {
          if (res.data.code === 200) {
            this.$message.success(res.data.message)
            this.init()
            this.showEidtVlidate = false
          } else {
            this.$message.error(res.data.message)
          }
        })
      }
    },
    // 获取页面数据
    init() {
      const basicParams = new BasicParams()
      basicParams.edExtraFirstCode = ''
      basicParams.edExtraFirstDescription = ''
      basicParams.edCode = ''
      basicParams.edName = ''
      basicParams.edId = 0
      basicParams.edParentCode = 'BD_CostElement'
      getEnumDetailSource(basicParams).then((res) => {
        if (res.data.code === 200) {
          this.deptType = res.data.data
          this.$nextTick(() => {
            setTimeout(() => {
              this.$refs.table.setCurrentRow(this.$refs.table.data[0])
              this.rowClick(this.$refs.table.data[0])
            }, 50)
          })
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    _getData() {
      // console.log("getData");
    },
    // 分页
    // pagationChange(payload) {
    //   this.pageAttr.currentPage = payload.page
    //   this.pageAttr.pageSize = payload.pageSize
    //   this._getData()
    // },
    switchUse(row) {
      // console.log(row.code, typeof row.isUse, row.isUse);
    },
    rowClick(row) {
      const basicParams = new BasicParams()
      // this.loading = true;
      basicParams.edExtraFirstCode = row.edCode
      basicParams.edParentCode = 'CostItem'
      getEnumDetailSource(basicParams).then((res) => {
        if (res.data.code === 200) {
          this.factorData = res.data.data
        } else {
          this.$message.error(res.data.message)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.dept-type {
  padding: 0 !important;
  flex: 0 0 240px;
  margin-right: 10px;
}
.factor-detail {
  padding: 0 !important;
  flex: 1;
}
.title {
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
  background-color: #fefefe;
  // border-bottom: 1px solid #ccc;
}
.button-bar {
  height: 48px;
  width: 100%;
  display: flex;
  align-items: center;
  padding-left: 12px;
  Button:first-of-type {
    margin-right: 12px;
  }
}
.table-box {
  padding: 12px;
  padding-top: 0;
  height: calc(100% - 60px);
  overflow-y: auto;
}
.edit-detail {
  color: #4073ff;
  cursor: pointer;
}
/deep/ .dept-type .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #217dfa;
  color: #fff;
}
/deep/ .el-table__body tr.current-row > td {
  background-color: #217dfa;
  color: #fff;
}
</style>
